﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!doctype html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css"/>
    <!-- 引入自定义css文件 style.css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>

    <style>
        body {
            margin-top: 20px;
            margin: 0 auto;
            width: 100%;
        }

        .carousel-inner .item img {
            width: 100%;
            height: 300px;
        }
    </style>

    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <script>
        // 页面加载成功之后 获取所有的分类信息 拼装到页面上

        $(function () {

            initCategory();

        })
        // 发ajax请求 查询所有分类 拼装到下拉菜单
        function initCategory() {
            //1.url
            let url = "${pageContext.request.contextPath}/categoryServlet";
            //2.params
            let params = {
                "method":"findAll"
            }
            //3.callBack
            let callback = function (rel) {
                // 遍历
                $(rel).each(function (index,ele) {
                    let s = "${productVo.product.cid}" == ele.cid ? "selected":""
                    $("#category").append("<option value='"+ele.cid+"' "+s+">"+ele.cname+"</option>")
                })
            }
            //4.发射
            $.post(url,params,callback,"json")
        }


        //location.href ="sdsd"

        function  sub(num) {
            location.href="${pageContext.request.contextPath}/productServlet?method=findProductByVo&pageNum="+num+"&product.cid=${productVo.product.cid}&startPrice=${productVo.startPrice}&endPrice=${productVo.endPrice}";
        }
    </script>

</head>

<body>

<div class="row" style="width:1210px;margin:0 auto;">
    <br>
    <%-- 下拉框与价格区间 --%>
    <form action="${pageContext.request.contextPath}/productServlet" method="post">
        <input type="hidden" name="method" value="findProductByVo">
        <input type="hidden" name="pageNum" value="1">

        分类:
        <select name="product.cid" id="category">
            <option value=''>--请选择类别---</option>
            <option value='1'>手机数码</option>
<%--            <option value='2'>电脑办公</option>--%>
<%--            <option value='3'>居家家具</option>--%>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        价格区间：
        <input type="text" name="startPrice" value="${productVo.startPrice}" placeholder="请输入最低价" id="start">
        -
        <input type="text" name="endPrice" value="${productVo.endPrice}" placeholder="请输入最高价" id="end">
        <input type="submit" placeholder="提交">
    </form>
    <%--商品展示--%>
    <br><br><br>
    <c:if test="${not empty pageInfo.list}">
        <c:forEach items="${pageInfo.list}" var="product">
            <div class="col-md-2">
                <a href="${pageContext.request.contextPath}/jsp/product_info.jsp">
                    <img src="${pageContext.request.contextPath}/${product.pimage}" width="170" height="170"
                         style="display: inline-block;">
                </a>
                <p><a href="${pageContext.request.contextPath}/jsp/product_info.jsp" style='color:green'>${product.pname}</a></p>
                <p><font color="#FF0000">商城价：&yen;${product.shopPrice}</font></p>
            </div>
        </c:forEach>



        <!--分页 -->
        <div style="width:380px;margin:0 auto;margin-top:50px;">
            <ul class="pagination" style="text-align:center; margin-top:10px;">
                <c:if test="${pageInfo.pageNum == 1}">
                    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                </c:if>
                <c:if test="${pageInfo.pageNum > 1}">
                    <li ><a href="#"  onclick="sub(${pageInfo.prePage})" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                </c:if>
                <c:forEach begin="1" end="${pageInfo.pages}" var="i">
<%--                    当前页--%>
                    <c:if test="${pageInfo.pageNum == i}">
                        <li class="active"><a href="#"  onclick="sub(${i})">${i}</a></li>
                    </c:if>
<%--                    其他页--%>
                    <c:if test="${pageInfo.pageNum != i}">
                        <li ><a href="#" onclick="sub(${i})">${i}</a></li>
                    </c:if>
                </c:forEach>
                <c:if test="${pageInfo.pageNum == pageInfo.pages}">
                    <li class="disabled">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </c:if>
                <c:if test="${pageInfo.pageNum < pageInfo.pages}">
                    <li >
                        <a href="#"   onclick="sub(${pageInfo.nextPage})"aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </c:if>

            </ul>
        </div>
        <!-- 分页结束=======================        -->



    </c:if>
    <c:if test="${ empty pageInfo.list}">
        <h1>该分类下无商品信息</h1>
    </c:if>
</div>



<div style="text-align: center;margin-top: 5px; position: absolute;bottom: 0;left: 600px">
    <ul class="list-inline" style="position: center">
        <li><a href="${pageContext.request.contextPath}/jsp/info.jsp">关于我们</a></li>
        <li><a>联系我们</a></li>
        <li><a>招贤纳士</a></li>
        <li><a>法律声明</a></li>
        <li><a>友情链接</a></li>
        <li><a target="_blank">支付方式</a></li>
        <li><a target="_blank">配送方式</a></li>
        <li><a>服务声明</a></li>
        <li><a>广告声明</a></li>
    </ul>
    <div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
        Copyright &copy; 2005-2016 传智商城 版权所有
    </div>
</div>


</body>

</html>